<template>
	<div>
		<!-- 占位 -->
    	<div class="zanwei-top"></div>
    	<div class="insetbox">
    		<div class="rappay">
	    		<div class="tit">
	    			<router-link class="tit" :to="{path:'/rappay'}" tag="div">
		    			<i class="iconfont icon-houtui"></i>
		    			<span @click="goback">订单支付</span>
	    			</router-link>
	    		</div>
	    		<div class="time">
	    			<i></i>
	    			<span>支付剩余时间 ：{{minute}}分钟{{second}}秒</span>
	    		</div>
	    		<div class="pay_box">
	    			<h4>结算信息</h4>
		    		<ul class="rap_intro">
		    			<li class="dd_name">订单名称：{{itemObj.title}}（1800元）</li>
		    			<li>
		    				<div>订单总价：</div>
		    				<span class="dd_je">{{itemObj.je}}元</span>
		    			</li>
		    			<li>
		    				<div>钱包余额：</div>
		    				<span>{{itemObj.qbye}}元</span>
		    			</li>
		    			<li>
		    				<div>还需支付：</div>
		    				<span class="dd_je">{{total}}元</span>
		    			</li>
		    		</ul>
		    		<h4>选择支付方式</h4>
		    		<ul class="gopay">
		    			<li>
		    				<div class="choose">
		    					<div class="ph toFlexMid">
			    					<img src="http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/4459320180609115117138.png"/>
			    				</div>
			    				<div class="cont">
			    					<strong>微信支付</strong>
			    					<p>推荐安装微信5.0及以上版本的使用</p>
			    				</div>
		    				</div>
		    				<div class="icon icon_select" @click="topay"></div>
		    			</li>
		    		</ul>
		    		<router-link :to="{path:'/rapright'}" tag="div"><div class="pay_btn">确认支付</div></router-link>
	    		</div>
	    	</div>
    	</div>
		<!--底部占位-->
	    <div class="zanwei-bottom"></div>
	    <!--防止点击-->
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				tid: null,
				minute: '15',
				second: '00',
				time: 5,
				itemObj: {
					img: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/9864120180608121647134.png',
					title: '乐宾9周年 店庆预售卡',
					img2: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/1424420180608122452695.png',
					je: 1800,
					qbye: 10
				}
			}
		},
		methods: {
			// 支付
			topay() {
				clearInterval(this.tid);
			},
			// 返回
			goback() {
				history.back(-1);
			},
			// 倒计时
			timego () {
				var that = this;
				var time = this.time ; //秒
				that.tid = setInterval(function () {
					time--;
					that.minute = that.addZero(Math.floor(time / 60));
					that.second = that.addZero(Math.floor(time % 60));
					if (time <= 0) {
						clearInterval(that.tid);
						Toast({
						  message: '订单超时',
						  position: 'middle',
						  duration: 1500
						});
						setTimeout(function () {
							history.back(-1);
						},1500);
					}
				},1000);
			},
			// 补零
			addZero (n) {
				return n < 10 ? '0'+n : n;
			}
		},
		mounted() {
			this.timego();
		},
		computed: {
			total: function () {
				var je = this.itemObj.je;
				var je2 = this.itemObj.qbye;
				var je3 = parseFloat(je + je2);
				return je3;
			}
		}
	}
	
</script>

<style lang="less">
.insetbox {
	display: flex;
	justify-content: center;
	padding-top: 0.15rem;
	background-color: #fff;
}
.rappay {
	border: 0.01rem solid #eee;
	box-shadow: 0 0 0.05rem #eee;
	width: 7rem;
	.tit {
		padding-left: 0.15rem;
		display: flex;
		align-items: center;
		height: 0.88rem;
		border-bottom: 0.01rem solid #f7f7f7;
		span {
			margin-left: 5px;
		}
	}
	.time {
		padding-left: 0.10rem;
		height: 0.72rem;
		display: flex;
		align-items: center;
		background-color: #fffbd8;
		border-right: 0.01rem solid #eee;
		color: #ffb22b;
		i {
			width: 0.2rem;
			height: 0.2rem;
			border-radius: 50%;
			background-color: #ffb22b;
			margin: 0 0.08rem;
		}
	}
	.pay_box {
		padding: 0.1rem;
	}
	h4 {
		padding-left: 0.2rem;
		line-height: 0.96rem;
		font-size: 0.3rem;
		font-weight: bold;
	}
	.rap_intro {
		background-color: #FFFFFF;
		border-radius: 0.04rem;
		box-shadow: 0 0 0.03rem #ccc;
		li {
			height: 0.92rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 0.01rem solid #f7f7f7;
			padding: 0 0.1rem;
			padding-right: 0.2rem;
		}
		.dd_je {
			color: #ffb22b;
		}
	}
	.gopay {
		background-color: #FFFFFF;
		border-radius: 0.04rem;
		box-shadow: 0 0 0.03rem #aaa;
		li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0.16rem;
			.choose {
				display: flex;
				align-items: center;
			}
			.ph {
				width: 1rem;
				height: 0.7rem;
				border-radius: 0.05rem;
				background-color: #eff1f2;
				box-shadow: 0 0 0.03rem #eee;
				
				img {
					width: 0.5rem;
					height: 0.48rem;
					background-color: #eff1f2;
				}
			}
			.cont {
				margin-left: 0.2rem;
				strong {
					font-size: 0.3rem;
					line-height: 0.44rem;
				}
				p {
					color: #ababab;
					font-size: 0.24rem;
					line-height: 0.4rem;
				}
			}
			.icon {
				width: 0.4rem;
				height: 0.4rem;
				border-radius: 50%;
				border: 0.02rem solid #eee;
				box-shadow: 0 0 0.05rem #eee;
			}
			.icon_select {
				background: url(http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/9377620180609104554292.png) no-repeat;
				background-size: cover;
				border: none;
			}
		}
	}
	.pay_btn {
		width: 100%;
		height: 0.94rem;
		line-height: 0.94rem;
		background-color: #BAD269;
		color: #fff;
		font-size: 0.3rem;
		text-align: center;
		margin-top: 0.2rem;
	}
}
.toFlexMid {
	display: flex;
	justify-content: center;
	align-items: center;
}
.dd_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>